<template>
  <el-container>
    <el-header class="auto">
      <!--搜索框-->
      <el-form :inline="true" :model="input" class="demo-form-inline">
        <el-form-item label="币种ID">
          <el-input v-model="input.id" placeholder="币种ID"></el-input>
        </el-form-item>
        <el-form-item label="币种名(zh)">
          <el-input v-model="input.currency" placeholder="币种名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <!--end搜索框-->

      <el-button type="primary" @click="dialogFormVisible = true;">新增</el-button>
    </el-header>

    <el-main style="padding: 0;">
      <el-table
        :data="currency.list"
        style="width: 100%"
        :default-sort = "{prop: 'id', order: 'ascending'}"
      >
        <el-table-column
          prop="id"
          label="ID"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="currency"
          label="币种"
          width="180">
        </el-table-column>
        <el-table-column
          prop="rate"
          label="汇率"
          sortable>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          >
        </el-table-column>
        <!--操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div> <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button></div>
              <div style="margin-left: 10px;"> <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button></div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-pagination
      background
      style="padding: 20px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="input.page"
      :page-sizes="[20, 30, 40, 50]"
      :page-size="input.limit"
      layout="prev, pager, next,sizes"
      :total="currency.total">
    >
    </el-pagination>

<!--    弹窗-->

    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="币种" :label-width="formLabelWidth" prop="currency">
          <el-input v-model="form.currency" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="汇率" :label-width="formLabelWidth" prop="rate">
          <el-input v-model="form.rate" autocomplete="off" type="number"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCurrency">确 定</el-button>
      </div>
    </el-dialog>




  </el-container>

</template>

<script>
import {editRate,addRate} from "@/apilist/SystemSetting";
import {mapState,mapActions} from "vuex";

export default {
name: "setCurrency",
  data() {
    return {
      list: [],
      input: {
        currency: '',
        page:1,
        limit:20,
      },
      total:0,
      dialogFormVisible: false,
      form: {
        currency: '',
        rate: 0,
        id: 0,
      },
      formLabelWidth: '80px',
      title: '新增汇率',
      isOK : false,
    }
  },
  computed:{
  ...mapState("Setdata",["currency"]),
  },


  methods: {
  ...mapActions("Setdata",["getRateListAction"]),
    handleEdit(row) {
     this.form.id = row.id
     this.form.rate = row.rate
     this.form.currency = row.currency
      this.title = '编辑汇率';
      this.dialogFormVisible = true
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.rem(id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'+id
        });
      });
    },
    //请求后台数据

    onSubmit() {
      this.getRateListAction(this.input);
    },
    handleSizeChange(val) {
      this.input.page = val;
      this.getRateListAction(this.input);
    },
    handleCurrentChange(val) {
     this.input.limit = val;
     this.getRateListAction(this.input);
    },
    //删除元素
    rem(id){
      let len = this.list.length;
      let k= 0;
      for(let i=0;i<len;i++){
        if(this.list[i]['id'] == id) k = i;
      }
      this.list.splice(k,1);
    },
    async editCurrency(){
      let type = this.form.id ? 'edit' : 'add';
      if(type == 'edit'){
       await editRate(this.form).then(res => {
          console.log(res.state)
          if(res.state == 'ok') this.isOK = true
        });
      }else{
       await addRate(this.form).then(res => {
          if(res.state == 'ok') this.isOK = true
        });
      }
      await this.handleResult();

    },

    handleResult(){
      if(this.isOK){
        this.$message({
          message: this.title + '成功',
          type: 'success'
        });
      }else{
        this.$message.error(this.title + '失败')
      }

      this.form.id = 0;
      this.form.currency = '';
      this.form.rate = 0;
      this.dialogFormVisible = false;
      this.getRateListAction(this.input);
    }

  },



}
</script>

<style scoped>

</style>
